<template>
	<view class="">
		<dsl-navbar title="缘分女生" bgTopImg="white" isBack=""></dsl-navbar>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper_image">
			<swiper-item v-for="(item,index) in list" :key='index' class="swiper_image">
				<view class="swiper-item swiper_image">
					<image src="https://img1.baidu.com/it/u=4115505678,3537470771&fm=26&fmt" mode="aspectFill"
						class="bg-gray swiper_image"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="destined_body margin-tb  align-center rowsb text-white">
			<view style="width: 33%;"></view>
			<view style="width: 33%;" class="text-lg text-center">缘分女生</view>
			<view style="width: 33%;" class="justify-end padding-right">
				<image src="/static/home/imgshuaxin.png" mode="widthFix" style="width: 40rpx;"
					:class="{'loader':isLoader}" @click="loaderMen()"></image>
			</view>
		</view>
		<view class="rowsc" v-if="videoList && videoList.length !=0">
			<view class="stream ">
				<!-- #ifdef APP-PLUS -->
				<view class="animation-scale-up" v-for="(itme,index) in videoList" :key="index" >
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="" v-for="(itme,index) in videoList" :key="index" >
				<!-- #endif -->
					<view class="video_list " >
						<image :src="itme.avatar" mode="widthFix" class="video_list bg-gray"></image>
						<view class="video_bottom text-sm text-white align-center padding-left-xs">
							<image src="/static/home/imgzuanshi-1.png" mode="widthFix" style="width:30rpx ;"></image>
							<view>{{itme.fee || 0}}/min</view>
						</view>
						<view class="video_top text-white">
							<view style="height: 20rpx;width: 20rpx;background-color: #21BF53;" class="round"></view>
							<view class="margin-left-xs">在线</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<moreLoading v-else></moreLoading>
		<view class="submit rowsc align-center text-white text-center">
			<view style="width: 80rpx;opacity: 0.8;">
				一键求聊
			</view>
		</view>
	</view>
</template>

<script>
	import {
		randomGirlList
	} from '@/common/path.js'
	export default {
		data() {
			return {
				list: [
					1
				],
				isLoader: true,
				videoList: [], //女死列表
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {

		},
		onShow() {
			this.randomGirlList()
		},
		methods: {
			//刷新
			loaderMen() {
				this.isLoader = !this.isLoader
				this.videoList = []
				this.randomGirlList()
			},

			//缘分女生
			randomGirlList() {
				let data = {
					pageSize: 10,
				}
				this.Http.POST(randomGirlList, data)
					.then((res) => {
						if (res.code == 0) {
							console.log('[缘分女生]', res);
							this.videoList = res.data
							if (this.isLoader) {
								this.$tools.showToast('成功')
							}
							this.isLoader = false
						}
					})
			},
		},
		computed: {},
		components: {}
	}
</script>

<style>
	.swiper_image {
		width: 750rpx;
		height: 350rpx;
		background: #F7F6FA;
		opacity: 1;
	}

	.destined_body {
		width: 750rpx;
		height: 80rpx;
		background: #EAA019;
		opacity: 1;
	}

	.video_list {
		width: 342rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		position: relative;

	}

	.video_bottom {
		width: 168rpx;
		height: 40rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		border-radius: 0px 7rpx 7rpx 0px;
		line-height: 40rpx;
		position: absolute;
		left: 0;
		z-index: 1;
		bottom: 30rpx;
	}

	.video_top {
		position: absolute;
		top: 10rpx;
		align-items: center;
		display: flex;
		left: 20rpx;
	}

	.stream {
		-webkit-column-count: 2;
		/* -moz-column-count: 2; */
		/* column-count: 2; */
		/* -moz-column-gap: 30rpx; */
		/* -webkit-column-gap: 30rpx; */
		/* display: inline-block; */
	}

	.submit {
		background-image: url(/static/icon/kefu_jianghua-2.png);
		background-size: 100% 100%;
		height: 130rpx;
		width: 130rpx;
		position: fixed;
		z-index: 99;
		left: 0;
		right: 0;
		bottom: 100rpx;
		margin: 0 auto;
	}

	.loader {
		border-bottom-color: transparent;

		animation: 1s loader linear infinite;
	}

	/* 360度旋转 */
	@keyframes loader {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
